// subPackages/packageA/shesu/components/lawsuitId/lawsuitId.ts
import * as echarts from '../ec-canvas/echarts';
import { getSxStatYearListAPI } from "../../../api/shesu"
let seriesData = []
let xData = []
function setOption(chart) {
  var option = {
    legend: {
      show: true
    },
    tooltip: {
      show: false,
      backgroundColor: "rgba(0,0,0,0.7)",
      borderWidth: 0,
      textStyle: {
        color: "#fff",
        fontWeight: "normal"
      }
    },
    grid: {
      left: 15,
      right: 15,
      bottom: 15,
      containLabel: true
    },
    color: ["#4458FE", "#F35F5E", "#F6BD16"],
    xAxis: {
      type: 'category',
      data: xData
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: "dashed"
        }
      }
    },
    series: seriesData
  };
  chart.setOption(option);

}
Component({
  options: {
    styleIsolation: "apply-shared"
  },
  /**
   * 组件的属性列表
   */
  properties: {
    debtorId: {
      type: String,
      value: ""
    },
    businessType: {
      type: String,
      value: "1"
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    seriesData: [],
    xData: [],
    ec: {
      lazyLoad: true
    },
    isLoaded: false,
    emptyFlag: false
  },
  lifetimes: {
    attached: function () {
      this.ecComponent = this.selectComponent('#mychart-dom-bar')
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    init() {
      this.ecComponent.init((canvas, width, height, dpr) => {
        // 获取组件的 canvas、width、height 后的回调函数
        // 在这里初始化图表
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        setOption(chart);

        // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
        this.chart = chart;

        this.setData({
          isLoaded: true
        });
        return chart;
      });
    },
    getDatas() {
      getSxStatYearListAPI({ id: this.data.debtorId, businessType: this.data.businessType }).then(res => {
        let content = res.content || [];
        if (content.length == 0) {
          this.setData({
            emptyFlag: true
          })
          return
        }
        xData = content.map(item => item.name)
        seriesData.push({
          data: content.map(item => item.accuserNum),
          type: 'bar',
          stack: 'a',
          name: '原告',
          barWidth: "70%"
        })
        seriesData.push({
          data: content.map(item => item.accusedNum),
          type: 'bar',
          stack: 'a',
          name: '被告'
        })
        seriesData.push({
          data: content.map(item => item.thirdManNum),
          type: 'bar',
          stack: 'a',
          name: '第三人/其他'
        })
        this.init()
      })
    }
  },
  observers: {
    'debtorId': function () {
      if (this.data.debtorId) {
        this.getDatas()
      }
    }
  },

})